<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="javax.jdo.PersistenceManager"%>
<%@page import="kr.icg.icgmshtest1.PMF"%>
<%@page import="kr.icg.icgmshtest1.Wish"%>
<%@page import="java.util.List"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="kr.icg.icgmshtest1.BaramSelection"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>네게바라</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">@import "img/theme.min.css";</style>
<style type="text/css" media="screen">@import "img/Init.css";</style>
<script type="text/javascript">
function goAbout()
{
	var obj = document.getElementById("about");	
    obj.style.display = "";
    
    obj = document.getElementById("select");
	obj.style.display = "none";

	obj = document.getElementById("home");
	obj.style.display = "none";

	obj = document.getElementById("info");
	obj.style.display = "none";	

	obj = document.getElementById("registerWish");
	obj.style.display = "none";	
}
function goHome()
{
	var obj = document.getElementById("about");	
    obj.style.display = "none";
    
    obj = document.getElementById("select");
	obj.style.display = "";

	obj = document.getElementById("home");
	obj.style.display = "";

	obj = document.getElementById("info");
	obj.style.display = "";

	obj = document.getElementById("registerWish");
	obj.style.display = "none";	
}

function goWish()
{
	var obj = document.getElementById("about");	
    obj.style.display = "none";
    
    obj = document.getElementById("select");
	obj.style.display = "none";

	obj = document.getElementById("home");
	obj.style.display = "none";

	obj = document.getElementById("info");
	obj.style.display = "none";

	obj = document.getElementById("registerWish");
	obj.style.display = "";	
}
function regist()
{
	var obj = document.getElementById("registerWish");	
	obj.submit();
}
</script>
</head>
<body  style=" background-color:Black; margin: 0;">

<div id="home">

    <table width='100%' border ='0' cellspacing = '0' cellpadding= '0'>
	    <tr style="height:77px; background: url('img/toolbar.jpg');">
		    <td width='5%' align='right'></td>
		    <td width = '20'></td>
		    <td align='center' style="height:78px"><font color='white'><h1>네게바라</h1> </font></td>
		    <td width='20' align='right'><font color='white'><a href="#about" onclick="goAbout()">About</a></font></td>
		    <td width='5%' align='right'></td>
	    </tr>
    </table>

</div>

<div id="select" style="background: url('img/back.png'); padding:20px;" >
    <ul class="rounded">
		<li class="forward"><a href="#registerWish" onclick="goWish()">내게바라 등록하기</a></li>
	</ul>
	<form action="AjaxServices/searchresult.jsp" method="post">
	<ul class="rounded edit">
		<li class="forward"><a href="#" class="submit" onclick='submit();'>내게바라 검색하기</a></li>
		<li>
			<input type="text" name="toNameLast" value="" maxlength="20" 
				placeholder="성" 
				style="height: 36px;" />
			<input type="text" name="toNameFirst" value="" maxlength="20"  
				placeholder="이름" 
				style="height: 36px;" />
		</li>
	</ul>
	</form>
	<h2>네게바라 리스트 (최근 10건)</h2>
<%
	PersistenceManager pm = PMF.get().getPersistenceManager();
	String query = "select from " + Wish.class.getName() + " order by date desc limit 10";
	List<Wish> wishes = (List<Wish>) pm.newQuery(query).execute();
	if (wishes.isEmpty()) {
%>
		<ul class="rounded">
			<li>내게바라 리스트가 등록되지 않았습니다.</li>
		</ul>
<%
	} else {
		for (Wish w : wishes) {
%>
		<ul class="rounded">
			<li class="arrow">
				<a href="AjaxServices/searchresult.jsp?
					toNameFirst=<%= w.getToNameFirst() %>&toNameLast=<%= w.getToNameLast() %>">
					<small><%= new SimpleDateFormat("MM.dd").format(w.getDate()) %></small>
					<em>to.</em> <%= w.getToNameLast() %> <%= w.getToNameFirst() %>
				</a>
			</li>
			<li><%= BaramSelection.getBaramContent(w.getContentNumber()) %></li>
		</ul>
<%
		}
	}
%>
</div>
<div id="info" class="info" >
	네게바라 리스트가 궁금하세요?
</div>


<form id="registerWish" style="display:none;" action="AjaxServices/registeredwish.jsp" method="POST">     
    <div>
	    <table width='100%' border ='0' cellspacing = '0' cellpadding= '0'>
		    <tr style="height:77px; background: url('img/toolbar.jpg');">
			    <td width='5%' align='right'></td>
			    <td width = '20'><a href="#home" class="back" onclick="goHome()">home</a></td>
			    <td align='center' style="height:78px"><font color='white'><h1>네게바라</h1></font></td>
			    <td width='20' align='right'><font color='white'><a href="#about" onclick="goAbout()">About</a></font></td>
			    <td width='5%' align='right'></td>
		    </tr>
	    </table>	
	</div>
    <div style="background: url('img/back.png'); padding:20px;" >    
        
	    <ul class="rounded">
	    	<li>
	    		<em>1. 입력하고</em><br />
	    		<em>2. 선택한 후</em><br />
	    		<em>3. 누르세요.</em><br />
	    	</li>
	    </ul>
		<h2>To.</h2>
		<ul class="individual">
			<li><input type="text" name="toNameLast" placeholder="성" /></li>
			<li><input type="text" name="toNameFirst" placeholder="이" /></li>
		</ul>
		<h2>널</h2>
		<ul class="edit rounded">
			<li>
				<select id="contentNumberID" name="contentNumber">
						<option value="0" selected>너</option>
					<optgroup label="행">
						<option value="1">수</option>
						<option value="2">함</option>
						<option value="3">내</option>
						<option value="4">잠</option>
						<option value="5">손</option>
					</optgroup>
					<optgroup label="말">
						<option value="6">예</option>
						<option value="7">여행</option>
						<option value="8">어린</option>
					</optgroup>
					<optgroup label="비밀">
						<option value="9">만</option>
						<option value="10">발</option>
					</optgroup>
				</select>
			</li>
		</ul>
		<a style="margin:0 10px; color:rgba(0,0,0,.9)" href="#" class="submit whiteButton" onclick="regist()">네게바라 등록</a><br />
	
	</div>
</form>


<div id="about" class="selectable" style="text-align: center;display:none;">
	<br /><br />
	<p><img src="https://www.google.com/a/cpanel/icg.kr/images/logo.gif?service=lso" /></p>
	<br /><br /> 
	<p><strong>네게바라</strong><br />Version 1.0 beta<br /> 
	    <a href="http://www.icg.kr">Initiative Counsulting Group</a></p> 
	<p><em>Create powerful mobile apps with<br /> just HTML, CSS, and jQuery.</em></p> 
	<p> 
	    <a href="http://twitter.com/jqtouch" target="_blank">@jQTouch on Twitter</a> 
	</p> 
	<p><br /><br /><a href="#" class="grayButton goback" onclick = "goHome()">Close</a></p> 
</div>
</body>
</html>


